<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <#include "/pubHeadStyle.html">
    <link rel="stylesheet" href="${ctx}/formStatic/style/forms/formDevise.css" media="all">
</head>
<body>
<form class="layui-form" action="" id="printForm" lay-filter="formData" style="position: relative">
    <div style="height: 50px;position: fixed;width: 100%;background-color: #fafafa;z-index:100">
        <div class="form-top-opt" style="margin: 10px 15px 0 10px;float: left;">
            <a class="saveForm layui-btn layui-btn-sm" lay-submit="" lay-filter="add">保存</a>
        </div>

        <div class="form-top-opt" style="margin: 10px 15px 0 10px;float: left;">
            <a class="close layui-btn layui-btn-sm layui-btn-danger">取消</a>
        </div>
    </div>
    <!--表单内容-->
    <div style="height: 100px;position: fixed;width:100%;background: #fafafa;z-index:9999;top:50px" >
        <div class="layui-form-item" style="border:1px solid #ccc;margin-bottom:0">
            <div class="layui-block">
                <label class="layui-form-label" style="width: 15%;background: #fafafa;border-left:1px solid #ccc;border-right:1px solid #ccc">模块名</label>
                <div class="layui-input-inline" style="width: 30%">
                    <input type="text" name="templateName" autocomplete="off" style="height: 30px;margin:3px 0 0 5px"
                           class="layui-input" id="templateName" lay-verify="required"/>
                </div>
                <label class="layui-form-label" style="width: 15%;background: #fafafa;border-left:1px solid #ccc;border-right:1px solid #ccc">别名</label>
                <div class="layui-input-inline" style="width: 30%">
                    <input type="text" name="alias" autocomplete="off" class="layui-input" id="alias" style="height: 30px;margin:3px 0 0 5px" lay-verify="required"/>
                    <input type="hidden" name="id" id="printTemplateId" value="${id}"/>
                    <input type="hidden" name="formKey" id="formKey" value="${formKey}"/>
                    <input type="hidden" name="tableId" id="tableId" value="${tableId}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item radioMargin" style="border:1px solid #ccc;border-top:none;">
            <label class="layui-form-label" style="width: 15%;background: #fafafa;border-left:1px solid #ccc;border-right:1px solid #ccc">是否在流程结束后显示</label>
            <div class="layui-input-inline" style="width: 30%" id="isPrintInFinish">
                <input type="radio" name="isPrintInFinish" value="0" title="否"/>
                <input type="radio" name="isPrintInFinish" value="1" title="是"/>
            </div>

            <label class="layui-form-label" style="width: 15%;background: #fafafa;border-left:1px solid #ccc;border-right:1px solid #ccc">是否显示普通表单</label>
            <div class="layui-input-inline" style="width: 30%" id="isPrintInForm">
                <input type="radio" name="isPrintInForm" value="0" title="否"/>
                <input type="radio" name="isPrintInForm" value="1" title="是"/>
            </div>

        </div>
    </div>
</form>

<div class="form-header" style="top: 140px;">
    <div class="form-top-name"></div>

    <div class="layui-tab layui-tab-brief" lay-filter="tabsTem">
        <ul class="layui-tab-title">
            <li class="layui-this">布局</li>
            <li>组件</li>
            <li style="display: none;">组件</li>
        </ul>
        <div class="layui-tab-content">
            <ul class="dragSourceTop formTopTem">

            </ul>
        </div>
    </div>
</div>

<div class="tableEventCont">

    <a class="firstInsRow">前插入行</a>
    <a class="afterInsRow">后插入行</a>
    <a class="deleteRow">删除当前行</a>
    <hr />
    <a class="firstInsCol">前插入列</a>
    <a class="afterInsCol">后插入列</a>
    <a class="deleteCol">删除当前列</a>
    <hr />
    <a class="cellMerge">合并单元格</a>
    <a class="cellSplit">拆分单元格</a>
    <hr />
    <!-- <a class="tableQuery">表格属性</a> -->
    <!-- <a class="rowQuery">行属性</a> -->
    <a class="cellQuery">单元格属性</a>
</div>

<div class="form-info" style="top:210px;">
    <div class="defLeftTem" style="top:210px;">

    </div>

    <div class="layui-form dragDiv" id="dragDiv">





    </div>
    <div class="form-props" style="top: 210px;">
        <div class="form-props-info">
            <div class="form-none">暂无选中组件属性</div>
        </div>
        <div class="form-props-opt">
            <div class="form-props-attr" state="0">属性</div>
        </div>
    </div>
</div>
<script src="${ctx}/extends/jquery.min.js"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js"></script>
<script>
    var printTemplateId = '${id}';
    var formKey = '${formKey}';

    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'setter','ice','dragLay','form','element','layer','totalFilter','slider','colorpicker','propsHandle','tableExcel','laydate','upload','layedit','tree','table','commons'], function () {

        //  下列配置项 注释表明  /*****/

        // -----常量声明----------
        var dragLay = layui.dragLay, // 拖拽插件
            $ = layui.$,  // jquery
            setter = layui.setter,  // 配置信息
            laydate = layui.laydate,  // 日志控件
            layedit = layui.layedit,  // 日期控件
            tree = layui.tree,    // 树 控件
            form = layui.form,    // 表单控件
            ice = layui.ice,    // 预读及连贯文件纽带
            layer = layui.layer,  // 弹窗控件
            propsHandle = layui.propsHandle,  // 初始化部分
            upload = layui.upload,  // 上传控件
            element = layui.element,  // 节点初始化 控件  （仅限 控制 layui内部元素 init）
            commons = layui.commons,
            formId = '${formDefId}' || '',   //  表单id *****
            defProps = {
                viewMould: serverPath.formPath + '/form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
                //viewMould: 'moulds/', // 组件模块 存放文件 *****
                // 模块组件样式
                initCss:[
                    // 'style/forms/formDevise',
                    'style/forms/dragLay',
                    'style/forms/grid/grid1',
                    'style/forms/grid/grid2',
                    'style/forms/grid/grid3',
                    'style/forms/template/tag',
                    'style/forms/template/text',
                    'style/forms/template/table',
                    'style/forms/template/textArea',
                    'style/forms/template/radioOption',
                    // 'style/forms/template/number',
                    'style/forms/template/date',
                    'style/forms/template/uploadFile',
                    'style/forms/template/richText',
                    'style/forms/template/select',
                    'style/forms/template/checkOption',
                    'style/forms/template/dataLexi',
                    'style/forms/template/uploadImg',
                    'style/forms/template/selector',
                    'style/forms/template/hideField',
                    'style/forms/template/button'
                ],
                // 模块分类  末位为模块组索引
                initTopTemList0: [
                    'grid/grid1',
                    'grid/grid2',
                    'grid/grid3',
                    'template/table',
                    'template/tag',
                    'template/button'
                ],
                // 模块分类
                initTopTemList1: [
                    'template/text',
                    'template/textArea',
                    // 'template/number',
                    'template/date',
                    'template/uploadFile',
                    'template/uploadImg',
                    'template/richText',
                    'template/select',
                    'template/radioOption',
                    'template/checkOption',
                    'template/dataLexi',
                    'template/selector',
                    'template/hideField'
                ],
                // viewCss:'style/forms/',
                formPropsInfo:'.form-props-info',
                formAreaInfo:'.dragDiv',
                loadReq:'request',
                formPropsAttr:'.form-props-attr',
                formProps:'.form-props',
                formCont:'.form-info',
                suffix:'',
                dragTopName:'.formTopTem',
                dragLeftName:'.defLeftTem',
                temSpace: '.temSpace',
                selectStamp:'selectStamp',
                temDate:'.temDate',
                uploadFileBtn:'.uploadFileBtn',
                uploadImgBtn:'.uploadImgBtn',
                richTextArea:'.richTextArea',
                selectInput:'.selectInput',
                radioOptionCont:'.radioOptionCont',
                dataLexiTree:'.dataLexiTree',
                selectorBtn:'.selectorBtn',
            },
            temQuery = new propsHandle()  // 实例化模板功能部分
        ;


        // --- 通用方法 -----

        // 右侧属性load
        function propsLoad(name){
            $(defProps.formPropsInfo).load(setter.views+defProps.viewMould+$(name).attr(defProps.loadReq)+'/props'+defProps.suffix)
        }

        // 延迟执行拆解
        function timeoutLoad(name,i,item){
            $(name+' > li').eq(i).load(setter.views+defProps.viewMould+item+'/index'+defProps.suffix,function(){
                $(name+' > li').eq(i).find(defProps.temSpace).parent().attr(defProps.loadReq,item);
            });
        }

        // 顶部数据加载
        function sourceLoad(name,list){
            $(name).html('');
            for(var i=0;i<list.length;i++){
                $(name).append('<li></li>');
                timeoutLoad(name,i,list[i])
            }
        }




// ------start---------


        // init 模板部分渲染
        ice.loadCss(defProps.initCss);
        sourceLoad(defProps.dragTopName,defProps.initTopTemList0);
        // 顶部事件切换
        element.on('tab(tabsTem)', function(data){
            sourceLoad(defProps.dragTopName,defProps['initTopTemList'+data.index]);
            dragCase.init();
        });


        // 左侧
        if(!!formId){
            $(defProps.dragLeftName).load(serverPath.formPath + setter.formLinkPath +'printTemplate/view/formDesign/printFormLeftTem?formDefId='+formId + defProps.suffix);
        }

        // 拖拽部分功能init实例
        window.dragCase = new dragLay({
            dragId : 'dragDiv',
            dragMoveBtn : 'dragMoveBtn',
            dragInfo : 'dragInfo',
            dragRemove : 'dragRemove',
            dragSourceTop : 'dragSourceTop',
            dragSourceLeft : 'dragSourceLeft',
            placeX : !!formId? 100 : 0,
            placeY : 70,
            extend:{
                tableExcel:function(){
                    new tableExcel({
                        extend: {
                            firstInsRow : function(){
                                setTimeout(function(){
                                    dragCase.init();
                                },0)
                            },
                            cellQuery:function(objs){
                                objs.click();
                            },
                            cellSplit:function(){
                                $(defProps.formPropsInfo).html('');
                                $(defProps.formPropsInfo).attr(defProps.loadReq,'');
                                $(defProps.formPropsInfo).attr('state','1');
                                $(defProps.formPropsAttr).click();
                            }
                        }
                    })
                },
                extdndInit:function(){
                    // 扩展类init 部分
                    //--- 日期----
                    //   初始化组件事件
                    temQuery.initTemEvent(defProps,serverPath,setter);

                    form.render();

                }
            }
        });



        // 默认加载右侧及展开关闭
        $(defProps.formPropsAttr).click(function(){
            var req = $(defProps.formPropsInfo).attr(defProps.loadReq);
            if($(defProps.formPropsInfo).attr('state') === '1'){
                $(defProps.formPropsInfo).html('<div class="form-none">暂无选中组件属性</div>');
            }else if(req){
                propsLoad(defProps.formPropsInfo);
            }
            return false;
        });



        // 处理组件选中事件
        $(document).on('mouseup',defProps.temSpace,function(e){
            $(defProps.formPropsInfo).attr(defProps.loadReq,$(this).parent().attr(defProps.loadReq));
            $(defProps.formPropsInfo).attr('state','0');
            $(defProps.temSpace).removeClass(defProps.selectStamp);
            $(this).addClass(defProps.selectStamp);
            $(defProps.formPropsAttr).click();
            return false;
        });




        // 处理组件删除事件
        $(document).on('click','.dragRemove',function(){
            $(defProps.formPropsInfo).html('');
            $(defProps.formPropsInfo).attr(defProps.loadReq,'');
            $(defProps.formPropsInfo).attr('state','1');
            $(defProps.formPropsAttr).click();
        });


        // table 扩展部分excel功能

        $(defProps.formCont).css('left' ,!!formId ? '100px' : '0px' );
        $(defProps.dragLeftName).css('display',!!formId ? 'block' : 'none' );



        // 初始化模板功能
        temQuery.initTem({
            selectorBtn:defProps.selectorBtn,
            selectorTemPath:setter.views+defProps.viewMould
        });

        // 保存
        form.on('submit(add)', function (data) {
            data.field.html = encodeURIComponent(encodeURI($('#dragDiv').html()));
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath +"printTemplate/add",
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                dataType: 'json',
                success: function (result) {
                    window.parent.layer.alert(result.msg, function (index) {
                        if(commons._filterRecord(result)) {
                            opener.location.reload();
                            window.close();
                        }else{
                            layer.close(index);
                        }
                    });
                }
            })
        });

        //自动添加别名
        $("#templateName").on('blur', function () {
            var fieldDesc = $(this).val();
            if ($.trim(fieldDesc).length < 1)
                return;
            $.ajax({
                url: serverPath.formPath + "form/table/getFieldKey",
                data: ({fieldDesc: fieldDesc}),
                dataType:'json',
                success: function (obj) {
                    if (commons._filterRecord(obj)) {
                        $("#alias").val(obj.data);
                    }
                }
            });
        });

        // 关闭
        $('.close').click(function () {
            window.close();
        })
    })
</script>
</body>
</html>